<%--
  Created by IntelliJ IDEA.
  User: 小柒的Java
  Date: 2021/7/20
  Time: 10:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax局部刷新</title>
    <script src="webjars/jquery/3.5.1/jquery.min.js"> </script>
    <script>

        $(function () {
            $.get("selectPAC2",{"action":"province"},function (resp) {
                $.each(resp,function (i,n){
                    $("#prov").append('<option value="'+n.provinceID+'">'+n.province+"</option>")
                })
            },"json")

            $("#prov").change(function () {
                $.getJSON("selectPAC2",{"action": "city","provinceID":$("#prov").val() },function (resp) {
                    $("#city").empty();
                    $.each(resp,function (i,n) {
                        $("#city").append('<option value="'+n.cityID+'">'+n.city+"</option>");
                    })
                })
            })

            $("#city").change(function () {
                $.ajax({
                    url:"selectPAC2",
                    type:"get",
                    data:{
                        "action":"area",
                        "cid" : $("#city").val()
                    },
                    dataType:'json',
                    success:function (resp) {
                        console.log(resp);
                        $("#area").empty();
                        $.each(resp,function (i,n) {
                            $("#area").append('<option value="'+n.areaID+'">'+n.areas+"</option>");
                        })
                    }
                })
            })

        });
    </script>
</head>
<body>
    <select id="prov"></select>省
    <select id="city"></select>城市
    <select id="area"></select>区
</body>
</html>
